﻿@model SAIM.Models.EditItemViewModel
@Scripts.Render("~/bundles/jqueryval")
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-primary">@SAIM.Resources.Site.EditItem</h4>
    </div>
    <div class="modal-body">
    @using (Html.BeginForm("_EditItem", "EVirtual", FormMethod.Post, new { @class = "form-horizontal", role = "form", @id = "EditItemForm" }))
    {
        @Html.AntiForgeryToken()
        @Html.Hidden("model[ListId]", Model.ListId)
        @Html.Hidden("model[Id]", Model.Data.FirstOrDefault(a => a.Key == "Id").Value)
        @Html.Hidden("model[DeleteRow]", false, new { id = "DeleteRow" })
        int elementNumber = 0;
        foreach (SAIM.Models.ListStructure column in Model.ColumnsList)
        {
            switch (column.ColumnType)
            {
                case "Text":
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <input class="form-control" data-val="true" id="item-@elementNumber" name="model[@column.ColumnName]" type="text">
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <script type="text/javascript">
                    $("#item-@elementNumber").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "Choice":
                    if (column.ChoiceType != null)
                    {
                        switch (column.ChoiceType)
                        {
                            case "DropDown":
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                                <div class="col-sm-9">
                                    <select class="selectpicker form-control" data-val="true" id="item-@elementNumber" name="model[@column.ColumnName]">
                                        @foreach (string choice in column.Choices)
                                        {
                                            <option>@choice</option>
                                        }
                                    </select>
                                    <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $('#item-@elementNumber').selectpicker({});
                                $('#item-@elementNumber').selectpicker('val', "@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                            </script>
                                    break;
                            case "Radio":
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                                <div class="col-sm-9 radio-selection">
                                    @foreach (string choice in column.Choices)
                                    {
                                        <div class="radio">
                                            @if (choice == Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString())
                                            {
                                                <label><input type="radio" id="item-@elementNumber" name="model[@column.ColumnName]" value="@choice" checked>@choice</label>
                                            }
                                            else
                                            { 
                                                <label><input type="radio" id="item-@elementNumber" name="model[@column.ColumnName]" value="@choice">@choice</label>
                                            }
                                        </div>
                                    }
                                    <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                                    break;
                            case "Checkbox":
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                                <div class="col-sm-9 checkbox-selection">
                                    @Html.Hidden("model[" + column.ColumnName + "]", "", new { @id = "item-" + elementNumber, @class = "checkbox-selection-value" })
                                    @{ 
                                        string[] choices = Newtonsoft.Json.JsonConvert.DeserializeObject<string[]>(Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString());
                                        foreach (string choice in column.Choices)
                                        {
                                            <div class="checkbox">
                                                @if ((choices != null) && (choices.FirstOrDefault(a => a == choice) != null))
                                                {
                                                    <label><input type="checkbox" data-value="@choice" checked>@choice</label>
                                                }
                                                else
                                                {
                                                    <label><input type="checkbox" data-value="@choice">@choice</label>
                                                }
                                            </div>
                                        }
                                    }
                                    <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                                break;
                        }
                    }
                    break;
                case "Integer":
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <input class="form-control" data-val="true" id="item-@elementNumber" name="model[@column.ColumnName]" type="text">
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <script type="text/javascript">
                    $("#item-@elementNumber").rules("add", "number");
                    $("#item-@elementNumber").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "Decimal":
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <input class="form-control" data-val="true" id="item-@elementNumber" name="model[@column.ColumnName]" type="text">
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <script type="text/javascript">
                    $("#item-@elementNumber").rules("add", "number");
                    $("#item-@elementNumber").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "Date":
                @Styles.Render("~/Content/datetimepicker")
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <div id="item-@elementNumber" class="input-group date" data-provide="datepicker">
                            <input class="form-control" data-val="true" id="item-@elementNumber-Val" name="model[@column.ColumnName]" type="text">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </div>
                        </div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                @Scripts.Render("~/bundles/datetimepicker")
                <script type="text/javascript">
                    $("#item-@elementNumber").datetimepicker({
                        format: 'YYYY/MM/DD',
                        widgetPositioning: {
                            horizontal: 'auto'
                        },
                        locale: 'es'
                    });
                    $("#item-@elementNumber-Val").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "Time":
                @Styles.Render("~/Content/datetimepicker")
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <div id="item-@elementNumber" class="input-group date" data-provide="datepicker">
                            <input class="form-control" data-val="true" id="item-@elementNumber-Val" name="model[@column.ColumnName]" type="text">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </div>
                        </div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                @Scripts.Render("~/bundles/datetimepicker")
                <script type="text/javascript">
                    $("#item-@elementNumber").datetimepicker({
                        format: 'H:mm:ss',
                        widgetPositioning: {
                            horizontal: 'auto'
                        },
                        locale: 'es'
                    });
                    $("#item-@elementNumber-Val").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "DateTime":
                @Styles.Render("~/Content/datetimepicker")
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <div id="item-@elementNumber" class="input-group date" data-provide="datepicker">
                            <input class="form-control" data-val="true" id="item-@elementNumber-Val" name="model[@column.ColumnName]" type="text">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </div>
                        </div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                @Scripts.Render("~/bundles/datetimepicker")
                <script type="text/javascript">
                    $("#item-@elementNumber").datetimepicker({
                        format: 'YYYY/MM/DD H:mm:ss',
                        widgetPositioning: {
                            horizontal: 'auto'
                        },
                        locale: 'es'
                    });
                    $("#item-@elementNumber-Val").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
                case "Hiperlink":
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="item-@elementNumber" title="@(column.ColumnDesc ?? "")">@column.Label</label>
                    <div class="col-sm-9">
                        <input class="form-control" data-val="true" id="item-@elementNumber" name="model[@column.ColumnName]" type="text">
                        <span class="field-validation-valid text-danger" data-valmsg-for="model[@column.ColumnName]" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <script type="text/javascript">
                    $("#item-@elementNumber").val("@MvcHtmlString.Create( Model.Data.FirstOrDefault(a => a.Key == column.ColumnName).Value.ToString() )");
                </script>
                    break;
            }
            <script type="text/javascript">
                @if (column.IsRequired && (column.DefaultValue == null))
                {
                    switch(column.ColumnType)
                    {
                        case "Date": 
                        case "Time": 
                        case "DateTime":
                            @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "-Val\").rules('add', 'required');")
                            break;
                        default:
                            @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").rules('add', 'required');")
                            break;
                    }
                }
                @if(column.MinValue != null)
                {
                    @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").rules('add', { min: " + column.MinValue.Value + " });")
                }
                @if(column.MaxValue != null)
                {
                    @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").rules('add', { max: " + column.MaxValue.Value + " });")
                }
                @if(column.Size != null)
                {
                    @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").attr('maxlength', '" + column.Size.Value + "');")
                }
                @if(column.DefaultValue != null)
                {
                    switch (column.ColumnType)
                    {
                        case "Date":
                        case "Time":
                        case "DateTime":
                            @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "-Val\").attr('placeholder', '" + column.DefaultValue + "');")
                            break;
                        default:
                            @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").attr('placeholder', '" + column.DefaultValue + "');")
                            break;
                    }
                }
                @if(column.DecimalPlaces != null)
                {
                    @MvcHtmlString.Create("$(\"#item-" + elementNumber.ToString() + "\").attr('step', '0." + String.Format("1").PadLeft(column.DecimalPlaces.Value, '0') + "');")
                }
            </script>
            elementNumber++;
        }
        <div class="form-group" style="padding-top: 68px;">
            <div class="col-sm-offset-3 col-sm-9">
                <button id="AddItemBtn" type="submit" class="btn btn-primary">@SAIM.Resources.Site.OK</button>
                <button id="deleteColumn" type="submit" class="btn btn-default">@SAIM.Resources.Site.Delete</button>
            </div>
        </div>
    }
    </div>
</div>

<script type="text/javascript">
    $(function () {
        jQuery.extend(jQuery.validator.messages, {
            required: "@SAIM.Resources.Validations.FieldRequired",
            remote: "@SAIM.Resources.Validations.Remote",
            email: "@SAIM.Resources.Validations.Email",
            url: "@SAIM.Resources.Validations.Url",
            date: "@SAIM.Resources.Validations.Date",
            dateISO: "@SAIM.Resources.Validations.DateISO",
            number: "@SAIM.Resources.Validations.Number",
            digits: "@SAIM.Resources.Validations.Digits",
            equalTo: "@SAIM.Resources.Validations.EqualTo",
            accept: "@SAIM.Resources.Validations.Accept",
            maxlength: jQuery.validator.format("@SAIM.Resources.Validations.MaxLength"),
            minlength: jQuery.validator.format("@SAIM.Resources.Validations.MinLength"),
            rangelength: jQuery.validator.format("@SAIM.Resources.Validations.RangeLength"),
            range: jQuery.validator.format("@SAIM.Resources.Validations.Range"),
            max: jQuery.validator.format("@SAIM.Resources.Validations.Max"),
            min: jQuery.validator.format("@SAIM.Resources.Validations.Min")
        });

        $('.radio-inline input').bind('click', function () {
            if ($(this).data('name') === 'Unique') {
                $('#Unique').val($(this).data('value'));
            }
            else if ($(this).data('name') === 'Required') {
                $('#Required').val($(this).data('value'));
            }
        });

        $('#AddItemBtn').bind('click', function () {
            var selections = '[';

            $('.checkbox-selection > .checkbox').find('input:checkbox:checked').each(function () {
                selections += '"' + $(this).data('value') + '",';
            });
            selections += ']';
            $('.checkbox-selection-value').val(selections);
        });

        function restoreDeleteButton() {
            $('#deleteColumn').html('Eliminar');
        }

        $('#deleteColumn').bind('click', function () {
            if ($(this).text() === 'Eliminar') {
                $(this).html('¿Confirmar?');
                setTimeout(restoreDeleteButton, 1000);
                return false;
            }
            else {
                $('#DeleteRow').val('True');
                return true;
            }
        });
    });
</script>